<template>
  <div class="data_left07">
    <div class="dataAllNo01">
      <div class="dataAllBorder01">
        <div class="data_tit3">
          <el-tooltip placement="top-start">
           <template #content> 统计规则：<br />空编数排名前10的行业大类 </template>
           <span>分行业展示事业编制空编排名情况</span>
		 
          </el-tooltip>
        </div>
		<div
		  id="fhyzs"
		  style="width: 98%; height: calc(100% - 40px); float: left"
		></div>
      </div>
    </div>
  </div>
</template>
<script>
var myChart;
import Sever from "@/api/selfApi.js";
export default {
  props: ["selectCode"],
  name: "Fhyzs",
  data() {
    return {
    
      hyflData: [],
	  syBzData: [],
      kbsData: [],
      VALUE: [100, 200, 3000, 400, 300, 200, 100, 100, 200, 300, 400],
      option: {
		  grid: {
		    left: '4%',
		    top: '7%',
		    bottom: '12%',
		    right: '8%',
		    containLabel: true,
		  	width:1450
		  },
		  tooltip: {
		     trigger: 'axis',
		     axisPointer: {
		        type: 'cross',
		        crossStyle: {
		           color: '#999'
		        }
		     }
		  },
		  legend: {
			 
		     right: 10,
		    top: 12,
		    textStyle: {
		      color: '#fff'
		    },
		    itemWidth: 12,
		    itemHeight: 10,
		    // itemGap: 35
		  },
	color:[{
	type: 'linear',
	x: 0,
	x2: 0,
	y: 0,
	y2: 1,
	colorStops: [{
			offset: 0,
			color: '#40BDF7',
		},
		{
			offset: 0.5,
			color: '#40BDF7',
		},
		{
			offset: 1,
			color: '#3F82F7',
		},
	],
}, ],
	xAxis: [{
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		axisLabel: {
			interval: 0,
		  padding: [0, 0, 0, 0],
		  interval: 0,
		  rotate: 0,
		  fontSize: 12,
		  color: "#A5E7FF",
		  formatter: function (value) {
		    return value.substring(0, 2);
		  },
		},
	},{
		type: 'category',
		show: false,
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		axisLabel: {
			interval: 0,
		  padding: [0, 0, 0, 0],
		  interval: 0,
		  rotate: 0,
		  fontSize: 12,
		  color: "#A5E7FF",
		  formatter: function (value) {
		    return value.substring(0, 2);
		  },
		},
	}],
	yAxis: {
		type: 'value',
		
	},
	series: [{
		data:  [120, 2000, 150, 80, 70, 110, 130],
		barWidth: 20,
		type: 'bar',
		name: '编制数量',
	}, {
		data: [150, 230, 224, 218, 135, 147, 260],
		type: 'line',
		name: '空编数',
	}, {
		xAxisIndex: 0,
		itemStyle: {
			color: 'rgba(180, 180, 180, 0.2)'
		},
		
		barWidth: 60,
		emphasis: {
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					x2: 0,
					y: 0,
					y2: 1,
					colorStops: [{
							offset: 0,
							color: 'rgba(64, 247, 176, 0.25)'
						},
						{
							offset: 1,
							color: 'rgba(17, 34, 64, 0.25)'
						},
					],
				},
			},
		},
		type: 'bar'
	}]
},
    };
  },
  components: {
    Sever
  },
  watch: {
    selectCode(newV) {
      this.refreshData();
    },
  },
  methods: {
	  saveImageToBackend() {
	        // 将 echarts 图表转换为图片
	        const base64Data = myChart.getDataURL({
	          pixelRatio: 2,
	        });
	        
	        // 构建请求体数据
	        const requestData = {
	          image: base64Data,
	          depCode:this.selectCode,
	  			  name:this.selectCode+"5"+".png"
	        };
	  			
	  		
	        
	        Sever.smz
	            .getSaveImage(requestData)
	            .then((res) => {
	             
	            })
	            .catch((err) => {
	              console.log(err);
	            });
	        
	      },
	 
    async refreshData() {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("fhyzs"));
      myChart.clear();
      myChart.showLoading("default", {
        text: "正在加载，请稍候...",
        color: "#c23531",
        textColor: "rgba(255, 255, 255, 0.5)",
        maskColor: "#00000000",
        zlevel: 0,
      });
	     
      await Sever.smz
        .getFhyzs({ depCode: this.selectCode })
        .then((res) => {
          if (res.code == 1) {
            console.log(res.data);
            let data = res.data;
           this.hyflData=[];
            this.syBzData=[];
            this.kbsData= [];
            for (let index = 0; index < data.length; index++) {
              this.hyflData.push(data[index].hyfl);
              this.syBzData.push(data[index].syBz);
			  this.kbsData.push(data[index].kbs);
			
            }

            this.initEcharts();
          } else {
            console.log("接口请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initEcharts() {
      myChart.hideLoading();
	this.option.xAxis[0].data=this.hyflData;
	this.option.xAxis[1].data=this.hyflData;
	this.option.series[0].data=this.syBzData;
	this.option.series[1].data=this.kbsData;

      this.option && myChart.setOption(this.option);
      // 重置option属性
      this.option = this.$options.data.call(this).option;

      

      // 响应式变化
      window.addEventListener("resize", () => myChart.resize(), false);
    },
  },
  mounted() {
    this.refreshData();
  },
};
</script>